/*
 * @Author: Wilbur
 * @Date: 2018-11-20 09:04:51
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-11-24 14:43:05
 */
<template>
    <div class="container academy-editor-wrap">
        <el-form
            label-position="right"
            status-icon
            label-width="0"
            :disabled="false">
            <div class="form-unit">
                <p class="steps-desc"><strong>第一步：</strong>选择城市学校</p>
                <el-form-item
                    class="academy-form-item"
                    size="small"
                    prop="title"
                    label="">
                    <el-select
                        v-model="city_id"
                        filterable
                        class="form-select"
                        @change="fnChangeCity"
                        placeholder="请选择城市">
                        <el-option
                            v-for="item in cityList"
                            :key="item.city_id"
                            :label="item.name"
                            :value="item.city_id"/>
                    </el-select>

                    <el-select
                        v-model="school_id"
                        filterable
                        class="form-select"
                        placeholder="请选择学校">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.school_id"
                            :label="item.name"
                            :value="item.school_id"/>
                    </el-select>
                </el-form-item>
            </div>
            <p
                class="add-academy-desc "
                :class="(city_id == '' || school_id == '') ? 'add-desc-disabled' : ''">
                <strong>第二步：</strong>
                <span class="add-title">添加学院</span>
                <span class="add-desc">*一行只能提交一个学院，请勿重复提交</span>
            </p>
            <div
                class="form-unit"
                :class="(city_id == '' || school_id == '') ? 'add-desc-disabled' : ''"
                style="margin-top: 0;margin-bottom: 0;">
                <el-form-item
                    class="academy-form-item"
                    size="small"
                    prop="title"
                    label="">
                    <el-input
                        type="textarea"
                        rows="22"
                        :disabled="city_id == '' || school_id == ''"
                        placeholder="请输入内容"
                        v-model="academy_names"/>
                </el-form-item>
            </div>

            <div class="form-unit save-wrap">
                <div class="operate-baar">
                    <el-button
                        size="medium"
                        type="primary"
                        :disabled="city_id == '' || school_id == ''"
                        @click="fnCreateAcademy()">保 存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            cityList: [],
            schoolList: [],
            city_id: '',
            school_id: '',
            academy_names: '',
            authResult: {},
            breadcrumbList: [
                {
                    title: "任务反馈管理",
                },
                {
                    title: "学院管理",
                    name: 'AcademyList',
                },
                {
                    title: '添加学院'
                }
            ],
            taskNo: '',
            baseUrl: '',
            mobileUrl: '',
            sessionTicket: localStorage.getItem('sessionTicket'),
            escape: escape
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        this.taskNo = this.$route.query.task_no ? this.$route.query.task_no : '';

        if (this.taskNo) {
            this.baseUrl = this.$baseUrl;
            this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
            // TODO baseURl
            this.previewUrl = '';
            this.fnGetTask();
        }else{
            this.init = true;
        }

        this.getCityList();
    },
    methods: {
        /**
         * 获取城市列表
         */
        getCityList() {
            this.$post('/task/base_city%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                }
            });
        },
        /**
         * 获取学校列表
         */
        getSchoolList() {
            this.$post('/task/base_school%5Cget_simple_list', {
                city_id: this.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.list;
                }
            });
        },
        /**
         * 选择城市
         */
        fnChangeCity() {
            this.school_id = '';
            this.getSchoolList();
        },
        /**
         * 创建学院
         */
        fnCreateAcademy() {
            this.$post('/task/base_academy%5Ccreate', {
                school_id: this.school_id,
                academy_names: this.academy_names
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: resp.msg
                    });
                    setTimeout(() => {
                        this.$router.push({name: 'AcademyList'});
                    }, 2000);
                }
            });
        }
    },
};
</script>

<style lang="less" scoped>
    .margin-top{
        margin-top: 15px;
    }
    .academy-editor-wrap {
    //   background: #fff;
    //   margin: 15px;
    //   margin-bottom: 0;
    //   padding: 15px;
    //   overflow: auto;
    }
    .form-unit {
      background: #fff;
      margin: 15px;
      padding: 15px;
      position: relative;
    }
    .save-wrap{
        background: none;
    }
    .steps-desc{
        color: #000000;
        margin-bottom: 15px;
        strong{
            color: #1890FF;
        }
    }
    .add-academy-desc{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(24,144,255,1);
        padding: 15px;
        padding-bottom: 0;
        margin-left: 15px;
        margin-right: 15px;
        background: #fff;
        position: relative;
        .add-title{
            color: #000000;
        }
        .add-desc{
            color: #999999;
            padding-left: 20px;
        }
    }
    .add-desc-disabled{
        &:after{
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.3);
            z-index: 999;
        }
    }
    .operate-baar {
      width: 100%;
      text-align: center;
    }

</style>
<style lang="less">
    .form-select{
        width: 360px!important;
        margin-right: 45px;
    }
    .academy-editor-wrap{
        .form-unit{
            .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
                margin-bottom: 5px;
            }
        }
    }
</style>
